<template>
  <view class="container">
    <ve-form ref="formRef" :model="form" :rules="rules">
      <ve-card type="none">
        <ve-form-item label="驳回原因" labelPosition="top" prop="reason" required >
          <ve-input type="textarea" v-model="form.reason" placeholder="请输入" :maxlength="200" />
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box>
      <ve-button type="plain" size="long" @click="cancel">取消</ve-button>
      <ve-button type="primary" size="long" @click="agree">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { checkCostApi } from '@/api/cost/index'

  const form = ref({})
  const formRef = ref()
  const rules = ref({
    reason: {
      required: true,
      message: '请输入',
    },
  })
  const cancel = () => {
    uni.navigateBack()
  }

  const agree = () => {
    formRef.value.validate((valid, errors) => {
      if (valid) {
        let params = {
          costId: form.value.id,
          status: 6,
          reason: form.value.reason,
        }
        checkCostApi(params).then((res) => {
          uni.showToast({
            icon: 'none',
            title: '已驳回',
          })
          uni.navigateBack({ delta: 2 })
          uni.$emit('refreshData')
        })
      }
    })
  }

  onLoad((options) => {
    let id = options.id
    form.value.id = id
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx;
  }
</style>
